<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
    <style>
        div {
            width: 600px;
            height: 350px;
            border: rgb(241, 123, 86) 2px dashed;
            display: none;
        }
    </style>
</head>

<body>
    <button>生成九九乘法表</button>
    <div>
        <p></p>
    </div>
    <script>
        let div = document.getElementsByTagName("div")[0]; //外框
        let button = document.getElementsByTagName("button")[0]; //按钮

        /* function random() {//随机函数封装
            let a = Math.random() * 255 + 0;
            return a
        } */
        button.onclick = function() {
            div.style.display = "block"

            button.disabled = true;
            for (let i = 1; i <= 9; i++) {
                for (let j = 1; j <= i; j++) {
                    let p = document.createElement("p");
                    let span = document.createElement("span");

                    if (i == j) {
                        span.innerText = `${j}x${i}=${i*j}   `;
                        /* span.style.color = `rgb(${random()}, ${random()}, ${random()})` */
                        div.appendChild(span);
                        div.appendChild(p);

                    } else {
                        span.innerText = `${j}x${i}=${i*j}   `;
                        /* span.style.color = `rgb(${random()}, ${random()}, ${random()})` */
                        div.appendChild(span);
                    }


                }

            }

        }
    </script>
</body>

</html>